@import"../../assets/css/reset.css";
@import"../../assets/css/common.css";

//头部独立样式
header {
    border-bottom: 1px solid rgb(185, 207, 239);
    position: relative;
    background-color: #f1f1f1ff;

    .register {
        a {
            color: fff !important;
        }
    }

    nav {
        a {
            color: #000;
        }
    }

    .login {
        a {
            color: #000;
        }
    }
}

// <!-- 粒子插件 -->
.banner {
    background-color: #f1f1f1;
    height: 355px;
    position: relative;

    #mydiv canvas {
        z-index: 100 !important;
        position: absolute !important;
    }

    // // <!-- 粒子插件上面的布局内容 定位在粒子上正中间-->
    .banner-content {
        height: 270px;
        width: 1200px;
        z-index: 500;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;

        // 粒子插件上面左边盒子
        .banner-left {
            text-align: center;
            height: 270px;
            width: 270px;
            background-color: #fff;
            display: flex;
            flex-direction: column;

            div:nth-child(1) {
                width: 100%;
                height: 55%;
                position: relative;

                img {
                    width: 100px;
                }

            }

            div:nth-child(2) {
                position: relative;
                width: 100%;
                height: 45%;
                // background-color: rgb(50, 76, 52);
                align-items: center;
                justify-content: space-around;

                //下边三个小DIV
                div {
                    width: 90px;
                    height: 100%;
                    flex-direction: column;
                    justify-content: center;
                    display: flex;
                    width: 50px;
                    height: 120px;
                    align-items: center;

                    img {
                        margin-bottom: 20px;
                    }

                    p {
                        color: rgb(208, 208, 208);
                    }

                    img {
                        width: 25px;
                    }
                }
            }

        }

        // 粒子插件上面右边盒子
        .banner-reght {
            width: 850px;
            height: 100%;

            .banner-reght-titel {
                b {
                    font-size: 22px;
                    color: #555555;
                }

                span {
                    display: inline-block;
                    padding: 4px 8px;
                    font-size: 12px;
                    color: #00bdff;
                    border: 1px solid #00bdff;
                    border-color: #00bdff;
                    vertical-align: bottom;
                    margin-left: 10px;
                }

            }

            /* <!-- 描述 -->/ */
            .banner-reght-speak {
                span {
                    display: inline-block;
                    margin-right: 25px;
                    color: #f8aa39;
                    margin-top: 15px;
                    margin-bottom: 18px;
                    font-size: 12px;

                    img {
                        margin-right: 8px;
                        vertical-align: middle;
                    }
                }
            }

            /* <!-- 提示 --> */
            .hint {
                color: #6e6e6e;
                font-size: 14px;
            }

            /* <!-- 次数 --> */
            .inblock {
                display: inline-block;
            }

            .time {
                position: relative;

                span:nth-child(1) {
                    border-color: #00bdff;
                    color: #00bdff;

                    // background-image: url(../../assets/imgs/API详情页_17.jpg);
                    img {
                        margin-right: 5px;

                    }
                }

                //动态生成的span次数 后面点击添加类名三角形
                div {
                    .active {
                        background-image: url("../../assets/imgs/select.png");
                        background-repeat: no-repeat;
                        background-position: 49px 6px;
                        border-color: #00bdff;
                        border-color: #00bdff;
                        color: #00bdff;
                    }
                }

                span {
                    display: inline-block;
                    margin-right: 15px;
                    padding: 5px 10px;
                    border: 1px solid #999;
                    font-size: 12px;
                    margin-top: 17px;
                    cursor: pointer;

                    img:nth-child(1) {
                        height: 12px;
                    }
                }

                span:nth-child(5) {
                    position: absolute;
                    display: block;
                    height: 87px;
                    width: 87px;
                    /* background-color: rgb(35, 23, 23); */
                    top: 24px;
                    left: 0;
                    display: none;

                    img {
                        height: 87px;
                        width: 87px;
                        position: absolute;
                        top: -1px;
                        left: -1px;
                    }
                }

                .one {
                    position: relative;
                }
            }

            /* 扫码二维码显示 */
            .one:hover .five>img {
                display: block !important;
            }

            .five {
                img {
                    position: absolute;
                    display: block;
                    /* height: 50px; */
                    width: 87px;
                    display: none;
                }
            }

            /* 价格 */
            .money {
                margin-top: 15px;

                &>b {
                    color: red;
                    font-size: 18px;
                }

                span {
                    color: #cecece;
                    font-size: 12px;
                }
            }

            /* 立即申请 */
            .but {
                margin-top: 25px;
                background-color: #00bdff;
                border: none;
                padding: 12px 28px;
                color: #fff;
                font-size: 12px;
                cursor: pointer;
            }
        }

    }
}

//api主体导航栏菜单
.api-nav {
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 60px;

    ul {
        height: 100%;
        line-height: 50px;

        li {
            width: 150px;
            position: relative;
            cursor: pointer;

            //选项卡菜单默认样式
            &.on {
                color: #00bdff;
            }

            span {
                display: inline-block;
                position: absolute;
                height: 3px;
                width: 52px;
                background-color: #00bdff;
                top: 46px;
                left: 0px;
                display: none;

                //选项卡默认样式显示
                &.active {

                    display: block;
                }
            }

        }
    }
}

// 选项卡主体
.api-tab-content {
    height: 1400px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;

    .api-tab-content-left {
        height: 100%;
        width: 925px;

        // <!-- 左边选项卡主体1API文档 -->
        .car {
            height: 100%;
            width: 100%;
            display: none;

        }

        .block {
            display: block;
        }

        .car:nth-child(1) {
            background-color: rgb(170, 224, 216);

            .tab-left {
                // float: left;
                height: 1320px;
                width: 925px;

                .tab-left-content1 {
                    li {
                        margin-bottom: 25px;
                    }

                    b {
                        color: #555555;
                        font-size: 14px;

                    }

                    span {
                        color: #777777;
                    }
                }

                button {
                    display: inline-block;
                    height: 43px;
                    width: 150px;
                    background-color: #00bdff;
                    color: #fff;
                    font-size: 16px;
                    margin-top: 0;
                }

                /* 请求参数说明 */
                .please-speak {
                    height: 200px;
                    width: 100%;
                    color: #666;
                    margin-top: 50px;
                    margin-bottom: 50px;

                    p {span{
                        display: inline-block;
                        height: 20px;
                        width: 3px;
                        background-color: #00bdff;
                        vertical-align: middle;
                        margin-right: 20px;
                    
                    }
                }
            }


















        }

        .car:nth-child(2) {
            background-color: rgb(70, 27, 27);
        }

        .car:nth-child(3) {
            background-color: rgb(62, 167, 130);
        }

        .car:nth-child(4) {
            background-color: rgb(29, 60, 109);
        }



        // // <!-- 左边选项卡主体2 -->
        // // <!-- 左边选项卡主体3 -->
        // // <!-- 左边选项卡主体4 -->

    }

    .api-tab-content-right {
        width: 200px;
        height: 800px;
        background-color: rgb(51, 142, 95);
    }
}